<template>
    <view>

        <view class="footer-0 u-padding-30" v-if="type==0">
            <button class="submit-btn u-font-32" :class="{'submit-btn-disabled': !enable}" @click="onClick()"
                :disabled="!enable" :style="{background: bgColor}">
                <text :style="{color: textColor}">{{title}}</text>
            </button>
        </view>

        <view class="footer-1" v-else-if="type==1">
            <view class="footer-btn u-flex u-row-center u-col-center" :style="{background: bgColor}" @click="onClick()">
                <text class="u-font-30 btn-text" :style="{color: textColor}">{{title}}</text>
                <text class="icon add-icon">&#xe61f;</text>
            </view>
        </view>

        <view class="footer-2" v-else>
            <button class="submit-btn u-font-32" :class="{'submit-btn-disabled': !enable}" @click="onClick()"
                :disabled="!enable" :style="{background: bgColor}">
                <text :style="{color: textColor}">{{title}}</text>
            </button>
        </view>

    </view>
</template>

<script>
    /**
     * 按钮
     * @description 此组件一般用于显示按钮。
     * @tutorial https://www.dfer.site
     * @property {String} title 标题
     * @event {Function} @clickHandler 点击按钮会触发此事件
     * @example <dfer-button @clickHandler="handleBtClick" title="按钮" type="0"/>
     */
    export default {
        name: "dfer-button",
        data() {
            return {};
        },
        props: {
            title: {
                type: String,
                default: "按钮"
            },
            textColor: {
                type: String,
                default: "#FFFFFF"
            },
            bgColor: {
                type: String,
                default: "#137ED0"
            },
            type: {
                type: Number,
                default: 2
            },
            enable: {
                type: Boolean,
                default: true
            }
        },
        watch: {},
        created() {},
        methods: {
            onClick() {
                this.$emit('clickHandler');
            }
        }
    }
</script>

<style lang="scss" scoped>
    .footer-0 {
        background: #ffffff;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);

        .submit-btn {
            width: 100%;
            height: 88rpx;
            // background: $main-color;
            border-radius: 12rpx;
            border: none;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 500;

            &::after {
                border: none;
            }
        }

        .submit-btn-disabled {
            background: #c6d9f1 !important;
            color: #ffffff !important;
        }

    }

    .footer-1 {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 24rpx 32rpx 40rpx;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 20%);
        z-index: 10;

        .footer-btn {
            height: 96rpx;
            border-radius: 48rpx;
            // background: $main-background-linear;
            // box-shadow: 0 8rpx 32rpx $main-color;
            position: relative;
            transition: all 0.3s ease;
            padding: 0 40rpx;
        }

        .footer-btn:active {
            transform: translateY(2rpx);
            // box-shadow: 0 4rpx 16rpx $main-color;
        }

        .add-icon {
            font-family: 'iconfont' !important;
            font-size: 36rpx;
            color: #ffffff;
            margin-left: 12rpx;
        }

        .btn-text {
            // color: #ffffff;
            font-weight: 500;
            letter-spacing: 0.5rpx;
        }
    }

    .footer-2 {
        background: #ffffff;
        bottom: 0;
        left: 0;
        right: 0;
        padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);

        .submit-btn {
            width: 100%;
            height: 88rpx;
            // background: $main-color;
            border-radius: 12rpx;
            border: none;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 500;

            &::after {
                border: none;
            }
        }

        .submit-btn-disabled {
            background: #c6d9f1 !important;
            color: #ffffff !important;
        }


    }
</style>